<script setup lang="ts">
import { ref } from "vue";
import { useAdRechargeApply } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useI18n } from "vue-i18n";
import { ElMessageBox } from "element-plus";
const { t } = useI18n();
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Check from "@iconify-icons/ep/check";
import Close from "@iconify-icons/ep/close";
import {hasPerms} from "@/utils/auth";

defineOptions({
  name: "adRechargeApply"
});

const formRef = ref();
const tableRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  stateOptions,
  accountOptions,
  platformOptions,
  agentOptions,
  creatorOptions,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  openDialog,
  openBatchDialog,
  openProcessDialog,
  handleDelete,
  handleSelectionChange,
  canEdit,
  canDelete,
  canProcess
} = useAdRechargeApply();

function onFullscreen() {
  // 重置表格高度
  tableRef.value.setAdaptive();
}

async function confirmDelete(row) {
  try {
    await ElMessageBox.confirm(
      `确定要删除申请ID为 ${row.id} 的充值申请吗？`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );
    handleDelete(row);
  } catch {
    // 用户取消删除
  }
}
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="广告账号" prop="account_id">
        <el-select
          v-model="form.account_id"
          placeholder="请选择广告账号"
          clearable
          filterable
          class="!w-[200px]"
        >
          <el-option
            v-for="option in accountOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="处理状态" prop="state">
        <el-select
          v-model="form.state"
          placeholder="请选择状态"
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="option in stateOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="平台" prop="platform">
        <el-select
          v-model="form.platform"
          placeholder="请选择平台"
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="option in platformOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="代理商" prop="agent_id">
        <el-select
          v-model="form.agent_id"
          placeholder="请选择代理商"
          clearable
          filterable
          class="!w-[150px]"
        >
          <el-option
            v-for="option in agentOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="申请人" prop="creator_id">
        <el-select
          v-model="form.creator_id"
          placeholder="请选择申请人"
          clearable
          filterable
          class="!w-[150px]"
        >
          <el-option
            v-for="option in creatorOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="关键词" prop="keyword">
        <el-input
          v-model="form.keyword"
          placeholder="搜索账号或反馈内容"
          clearable
          class="!w-[200px]"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          {{ t("buttons.search") }}
        </el-button>
        <el-button
          :icon="useRenderIcon(Refresh)"
          @click="resetForm(formRef)"
        >
          {{ t("buttons.reset") }}
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title="广告账号充值申请管理"
      :columns="columns"
      :isExpandAll="false"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
      @fullscreen="onFullscreen"
    >
      <template #buttons>
        <el-button
          v-if="hasPerms(['assets:btn:create_charge_apply'])"
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="openBatchDialog()"
        >
          新增申请
        </el-button>
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 45 }"
          align-whole="center"
          row-key="id"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row }">
            <!-- 编辑按钮 - 只有待处理状态可编辑 -->
            <el-button
              v-if="canEdit(row.state)  && hasPerms(['assets:btn:edit_charge_apply'])"
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="openDialog('修改', row)"
            >
              {{ t("buttons.edit") }}
            </el-button>

            <!-- 处理按钮 - 只有待处理状态可处理 -->
            <el-button
              v-if="canProcess(row.state) && hasPerms(['assets:btn:recharge_process'])"
              class="reset-margin"
              link
              type="success"
              :size="size"
              :icon="useRenderIcon(Check)"
              @click="openProcessDialog(row)"
            >
              处理
            </el-button>

            <!-- 删除按钮 - 只有待处理状态可删除 -->
            <el-button
              v-if="canDelete(row.state) && hasPerms(['assets:btn:del_charge_apply'])"
              class="reset-margin"
              link
              type="danger"
              :size="size"
              :icon="useRenderIcon(Delete)"
              @click="confirmDelete(row)"
            >
              {{ t("buttons.delete") }}
            </el-button>

            <!-- 已处理状态显示查看按钮 -->
            <el-button
              v-if="!canProcess(row.state)"
              class="reset-margin"
              link
              type="info"
              :size="size"
              disabled
            >
              已处理
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 分页 -->
    <div class="flex justify-end mt-4">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        :total="pagination.total"
        :background="pagination.background"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
